<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-bill animate__animated animate__fadeIn">
			<view class="header">
				<view class="flex align-center flex-between">
					<view>
						<view class="tit">MY CREDITT</view>
						<view class="title">{{ $t("bill.index.title") }}</view>
					</view>
					<view class="flex align-center">
						<image
							class="close mr40"
							src="/static/images/message.png"
							mode="aspectFill"
							@click="router.push('/pages/user/bill/message')"
						></image>
						<image
							class="close"
							src="/static/images/close2.png"
							mode="aspectFill"
							@click="router.back()"
						></image>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="info">
					<view class="tx" @click="router.push('/pages/user/bill/withdraw')">
						{{ $t("bill.index.wallet") }}</view
					>
					<view class="flex flex-column flex-center" v-if="status">
						<view class="t1">{{ $t("bill.index.moneytit") }} </view>
						<view class="t2"> 50,000.00</view>
						<view class="t3">{{ $t("bill.index.text") }} </view>
						<view class="btn" @click="router.push('/pages/user/bill/repayment')">
							{{ $t("bill.index.now") }}</view
						>
					</view>
					<view class="canvas" v-else>
						<view class="t1">{{ $t("bill.index.edutit") }}</view>
						<view class="t2">240,000.00</view>
						<CustomProgress :value="80"></CustomProgress>
					</view>
					<view class="btns flex">
						<view class="flex flex-center flex50">
							<image
								class="icon"
								src="/static/images/bill1.png"
								mode="aspectFill"
							></image>
							<view @click="router.push('/pages/user/bill/mybill')">
								<view class="t4">{{ $t("bill.index.mybill") }} </view>
								<view class="t5"> {{ $t("bill.index.date") }}</view>
							</view>
						</view>
						<view class="flex flex-center flex50">
							<image
								class="icon"
								src="/static/images/bill2.png"
								mode="aspectFill"
							></image>
							<view>
								<view class="t4"> {{ $t("bill.index.myedu") }}</view>
								<view class="t5"> 300000.00</view>
							</view>
						</view>
					</view>
				</view>
				<view class="limit">
					<view class="title"> {{ $t("bill.index.edumanage") }} </view>
					<view class="border"></view>
					<view class="flex align-end list">
						<view class="flex flex-center flex-column li">
							<view class="money">3200.00</view>
							<view class="zhu red"></view>
						</view>
						<view class="flex flex-center flex-column li">
							<view class="money">2389.00</view>
							<view class="zhu blue"></view>
						</view>
						<view class="flex flex-center flex-column li">
							<view class="money">4798.00</view>
							<view class="zhu yellow"></view>
						</view>
						<view class="flex flex-center flex-column li">
							<view class="money">33768.00</view>
							<view class="zhu gray"></view>
						</view>
					</view>
					<view class="text flex align-center">
						<view>{{ $t("bill.index.tab1") }}</view>
						<view>{{ $t("bill.index.tab2") }}</view>
						<view>{{ $t("bill.index.tab3") }}</view>
						<view>{{ $t("bill.index.tab4") }}</view>
					</view>
				</view>
				<view class="shop">
					<view class="title flex align-center">
						<image class="icon" src="/static/images/shop.png" mode="aspectFill"></image>
						{{ $t("bill.index.mall") }}
					</view>
					<view class="flex banner flex-between">
						<image
							class="img1"
							src="/static/images/carcard_img02.png"
							mode="aspectFill"
						></image>
						<view class="flex flex-column">
							<image
								class="img2"
								src="/static/images/carcard_img03.png"
								mode="aspectFill"
							></image>
							<image
								class="img3"
								src="/static/images/carcard_img07.png"
								mode="aspectFill"
							></image>
						</view>
					</view>
					<view class="goods flex">
						<view class="item" v-for="(item, index) in 4">
							<image
								class="img"
								src="/static/images/carcard_img08.png"
								mode="aspectFill"
							></image>
							<view class="text">
								<text class="title overflow2">{{
									cache.lang == "zh"
										? "Filicori 500g 斐兹咖啡 源自意大利经典浓缩"
										: "Filicori 500g Filicori is derived from the classic Italian espresso"
								}}</text>
								<text class="price">{{
									cache.lang == "zh" ? "¥899元" : "¥899 yuan"
								}}</text>
							</view>
						</view>
					</view>
				</view>
				<cl-loadmore
					background-color="#f1f1f1"
					:loading="false"
					:finish="true"
					:text="$t('loadmore.text')"
					:loading-text="$t('loadmore.loadingText')"
					:finish-text="$t('loadmore.finishText')"
				></cl-loadmore>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import CustomProgress from "@/components/CustomProgress.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const status = ref(true);
const change = (e: any) => {
	console.log(e);
};

const reset = () => {
	// 重置表单
	uni.reLaunch({
		url: "/pages/user/soundLock/add",
	});
};

const login = () => {
	// 重置表单
	uni.reLaunch({
		url: "/pages/login/login",
	});
};
</script>

<style lang="scss" scoped>
.page-bill {
	padding-bottom: 30rpx;

	.header {
		width: 100%;
		height: 280rpx;
		// background: #0c81f7;
		background-image: url("/static/images/bg2.png");
		background-size: 100% 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.tit {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 24rpx;
			color: #ffffff;
		}

		.title {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 48rpx;
			color: #fefefe;
			margin-top: 10rpx;
		}

		.close {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.main {
		padding: 0 30rpx;

		.info {
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			width: 100%;
			position: relative;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.16);
			border-radius: 20rpx;
			margin-top: -100rpx;
			.tx {
				width: 140rpx;
				height: 50rpx;
				background: #ecf5ff;
				border-top-left-radius: 25rpx;
				border-bottom-left-radius: 25rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #0c81f7;
				line-height: 50rpx;
				position: absolute;
				right: 0;
				top: 30rpx;
				text-align: center;
			}
			.t1 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-top: 50rpx;
			}
			.t2 {
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 72rpx;
				color: #333333;
			}
			.t3 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
			.btn {
				width: 280rpx;
				height: 88rpx;
				background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
				border-radius: 44rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #ffffff;
				line-height: 88rpx;
				text-align: center;
				margin-top: 20rpx;
			}
			.canvas {
				padding-bottom: 30rpx;
				position: relative;
				.t1,
				.t2 {
					text-align: center;
					position: absolute;
					width: 100%;
					bottom: 100rpx;
				}
				.t2 {
					bottom: 20rpx;
					font-size: 56rpx;
				}
			}
		}
		.btns {
			width: 100%;
			// height: 120rpx;
			background: linear-gradient(0deg, #ffffff 0%, #f1f8ff 100%);
			border-radius: 12rpx;
			padding: 25rpx 0;
			margin-top: 30rpx;
			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 30rpx;
			}
			.t4 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 34rpx;
				color: #0c81f7;
			}
			.t5 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}
		.limit {
			width: 100%;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.16);
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			.title {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #333333;
				border-left: 14rpx solid #0c81f7;
				text-indent: 20rpx;
				line-height: 38rpx;
			}
			.border {
				width: 100%;
				height: 1rpx;
				background: #eeeeee;
				margin: 30rpx 0;
			}
			.list {
				border-bottom: 2rpx solid #eeeeee;
				.li {
					flex: 0 0 25%;
					.money {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
					.zhu {
						width: 60rpx;
						border-top-left-radius: 30rpx;
						border-top-right-radius: 30rpx;
						margin-top: 10rpx;
					}
					.red {
						height: 180rpx;
						background: linear-gradient(
							0deg,
							rgba(242, 75, 75, 0.6),
							rgba(242, 75, 75, 1)
						);
					}
					.blue {
						height: 130rpx;
						background: linear-gradient(
							0deg,
							rgba(12, 129, 247, 0.6),
							rgba(12, 129, 247, 1)
						);
					}
					.yellow {
						height: 220rpx;
						background: linear-gradient(
							0deg,
							rgba(247, 156, 12, 0.6),
							rgba(247, 156, 12, 1)
						);
					}
					.gray {
						height: 180rpx;
						background: linear-gradient(
							0deg,
							rgba(186, 194, 202, 0.6),
							rgba(186, 194, 202, 1)
						);
					}
				}
			}
			.text {
				view {
					flex: 0 0 25%;
				}
				text-align: center;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				margin-top: 30rpx;
			}
		}
		.shop {
			margin-top: 30rpx;
			.title {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #000000;
				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
			.banner {
				width: 100%;
				margin-top: 20rpx;
				.img1 {
					width: 330rpx;
					height: 330rpx;
					border-radius: 12rpx;
				}
				.img2 {
					width: 330rpx;
					height: 150rpx;
					border-radius: 12rpx;
				}
				.img3 {
					width: 330rpx;
					height: 150rpx;
					margin-top: 30rpx;
					border-radius: 12rpx;
				}
			}
		}
		.goods {
			margin-top: 30rpx;
			flex-wrap: wrap;
			.item {
				width: 330rpx;
				background-color: #fff;
				border-radius: 12rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				margin-right: 30rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.img {
					width: 330rpx;
					height: 330rpx;
				}
				.text {
					width: 100%;
					padding: 10rpx 20rpx 16rpx;
					box-sizing: border-box;
					.title {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
					.price {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #fb0000;
					}
				}
			}
		}
	}
}
</style>
